<template>
  <div class="search">
    <div class="left">
      <div class="txt">饿了么</div>
      <div class="right"> &nbsp;··· &nbsp;  | &nbsp; X</div>
    </div>
    <van-icon class="icon" name="search" />
    <input type="text" placeholder="请输入商家、商品名称" @click="search">
  </div>
</template>

<script>
export default {
  dara(){
    return{

    }
  },
  methods:{
     search(){
      this.$router.push("/mysearch")
    }
  }
};
</script>

<style scoped>
.search {
  width: 100%;
  height: 88px;
  background-color: rgb(53, 126, 242);
  display: flex;
  flex-direction: column;
}
.txt {
  width: 88px;
  height: 44px;
  font-size:26px;
  color:white;
  text-align: center;
  line-height:44px;
 
}
.right{
    width:82px;
    height:30px;
    font-size:18px;
    color:white;
    margin-top:8px;
    line-height: 30px;
    margin-left:185px;
    background-color: rgba(144, 144, 194, 0.644);
    border-radius: 20px;
    border:none;
}
.left{
    display: flex;
    justify-content: space-evenly;
}
input{
    width:360px;
    height:33px;
    border-radius: 20px;
    background-color: rgb(244, 241, 241);
    text-align: center;
    margin-left:5px;
    border:none;
}
.icon{
    position: absolute;
    left:78px;
    top:53px;
    font-size:22px;

}
</style>